<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <div id="app">
            <!-- 父组件向子组件传递 方法，使用事件绑定机制v-on -->
            <coml :ads='father' @func="show"></coml>
        </div>

        <template id="tmpl">
            <div>
                <h1>雷二丫最可爱了----{{ads}}</h1>
                <input type="button" value="雷二丫" @click='mygouzi'>
            </div>
        </template>
        <script src="./lib/vue-2.4.0.js"></script>
        <script>
            var coml = {
                template:'#tmpl',
                props:['ads'],
                data(){
                    return {
                        msg:{name:'雷呲花',add:'咻咻咻'}
                    }
                },
                methods: {
                    mygouzi(){
                        //当点击子组件按钮时，拿到父组件传递过来的方法
                        //emit :触发调用的意思
                        this.$emit('func',this.msg)
                    }
                },

            }


            var vm = new Vue({
                el: '#app',
                data: {
                    father:null
                },
                methods: {
                    show(data){
                        // alert('啾啾啾啾')
                        this.father=data
                    }
                },
                components:{
                    coml
                }
            })
        </script>
    </body>
</html>